<template>
	<view>
		<view class="commonArea">
			<view class="commonTitle">退款订单</view>
			<view class="content">
				<image :src='orderListInfo.classImage' class="thumb" mode="widthFix"></image>
				<view style="width:80%;margin-left:10px;">
					<view class="title">{{orderListInfo.className}}</view>
					<view class="detail"><text style="color:#666666">老师：{{orderListInfo.teacherName}}</text>
					<text style="font-size: 28rpx;font-weight: bold;" class="colorOrange">￥{{orderListInfo.classPrice}}</text></view>
				</view>
			</view>
		</view>
		
		<view class="commonArea" style="padding: 10px;">
			<view class="item"><text class="label">申请类型</text>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input colorGray">{{array[index]}}</view>
				</picker>
			</view>
			<view class="item"><text class="label">申请原因</text>
				<picker @change="bindPickerChange1" :value="index1" :range="array1">
					<view class="uni-input colorGray">{{array1[index1]}}</view>
				</picker>
			</view>
			<view class="item"><text class="label">退款说明</text></view>
			<view>
				<textarea class="reason" v-model="refound.refundRemark" placeholder="请填写补充说明，有利于您的退款售后哦~"></textarea>
			</view>
		</view>
		
		<view class="btn" @click="apply()">
			确认申请
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				'time':'2021-06-29 14:15',
				'order_id':'288077882',
				'title':'书法班',
				'teacher':'陈松',
				'point':'200',
				'thumb':'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/2.png',
				'pay_time':'2021-04-30 12:15',
				index:0,
				index1:0,
				array: ['仅退款'],
				array1: ['我不想要了', '买错了/已经重复下单'],
				ordersNumber:'',
				orderListInfo:'',
				refound: {
					orderNumber: '',
					refundRemark:'',
					refundType:'',
					refundCause:'',
					
				
				},
			}
		},
		onLoad(option) {
			this.ordersNumber = option.ordersNumber
			this.classInfo()
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			bindPickerChange1: function(e) {
				this.index1 = e.target.value
			},
			classInfo(){
				let _this = this
							this.$api.getClassOrdersListInfo({
								ordersNumber:this.ordersNumber
							}).then((res) => {
							   	if (res.data.code == 200) {
							   		// console.log(res.data.dataMap)
							   		_this.orderListInfo = res.data.dataMap
		
					        }
				    })
			},
			apply(){
				uni.showModal({
				    title: '提示',
				    content: '确定申请退款吗？',
				    success:(res) =>{
				        if (res.confirm) {
				            if(this.refound.refundRemark===''){
				            	uni.showToast({
				            	    title: '请填写退款说明',
				            	    duration: 2000,
				            		icon:'none'
				            	});
				            }else{
				            	this.refound.orderNumber = this.orderListInfo.ordersNumber
				            	this.refound.refundType = this.index + 1
				            	this.refound.refundCause = Number(this.index1) + 1
				            	console.log(this.refound)
				            	this.$api.ClassOrActivityRefund(this.refound).then((res) => {
				            		if (res.data.success) {
				            			uni.$emit("carData", 3)
				            			setTimeout(function() {
				            				uni.navigateBack({
				            					delta: 2
				            				});
				            			}, 1100);
										uni.showToast({
											title: '申请提交成功！',
											duration: 1500,
											icon: "none",
											
										});
				            		} else {
				            			uni.showToast({
				            				title: res.data.message,
				            				duration: 1000,
				            				icon: "none"
				            			});
				            		}
				            	})
				            }
				            
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
		}
	}
</script>

<style lang='scss'>
  page{background: #F8F8F8;padding:10px}
  .commonArea{background: white;margin-bottom: 20px;
      border-radius: 10px;
     .label{color:#666666;font-size:28rpx;margin-right:15px;}
	 .item{padding:15px 0;border-bottom: 1px solid #EEEEEE;display: flex;align-items: center;}
  }
  .commonTitle{padding:5px 10px 0;}
  .content{display: flex;
     padding:10px 20px;
  	 background:white;
	 border-top: 1px solid #EEEEEE;
  	 margin-top:10px;
  	 
     .thumb{border-radius: 5px;width:180rpx;}
  		 .title{font-size: 28rpx;font-weight: bold;}
  		 .detail{display: flex;justify-content: space-between;margin-top:20px;}
  }
  .btn{
  	   background-color: #FF5533;
  	   border-radius:50px;
  	   padding: 10px;
  	   width: 90%;
	   box-sizing: border-box;
  	   font-size: 28rpx;
  	   margin:20px auto;
  	   color:white;text-align: center;
  }
  .reason{
	  background: #F8F8F8;
	  border-radius: 8px;
	  width: 95%;
	  padding:10px;
	  height: 200rpx;
  }
</style>
